<template>
    <div class="box">
        <span class="iconfont icon-chuizi"></span>
        <div class="header" id="headerL">
          <router-link to='/search' tag='section'><i class="iconfont icon-sousuo2"></i><aside class="sousuo">请输入搜索关键字</aside></router-link>
        </div>
        <div class="content xushipocontent" id="xushipocontent">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text loosing-text>
            <van-swipe :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for='item of bannerlist' :key="item.bannerid">
                <img :src="item.img" alt="">
              </van-swipe-item>
            </van-swipe>
            <img class="homePage1" src="https://resource.smartisan.com/resource/929336086872dad8c191c52c5afe17ec.png?x-oss-process=image/resize,w_700/format,webp" alt="">
            <!-- list1第一个类似于banner图的位置 -->
            <homebannerlist1/>
            <!-- list2第二个类似于banner图的位置 -->
            <homebannerlist2/>
            <!-- list3第三个类似于banner图的位置 -->
            <homebannerlist3/>
            <!-- list4第四个类似于banner图的位置 -->
            <homebannerlist4/>
            <!-- list5第五个类似于banner图的位置 -->
            <homebannerlist5/>
            <!-- list6第六个类似于banner图的位置 -->
            <homebannerlist6/>
            <!-- list7第七个类似于banner图的位置 -->
            <homebannerlist7/>
            <!-- list8第八个类似于banner图的位置 -->
            <homebannerlist8/>
            <!-- 最下面的商品列表 -->
            <span v-show="flag" @click='backTop' class="iconfont icon-fanhuidingbu xushipospan"></span>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              >
              <underList :underList="underList"/>
            </van-list>
          </van-pull-refresh>
        </div>
    </div>
</template>

<style lang='scss'>
@import '@/lib/reset.scss';
html, body, .container, .box, .detail {
  @include rect(100%, 100%);
}
.xushipospan {
  position: fixed;
  width: 40px;
  height: 40px;
  bottom: 1rem;
  right: 0.14rem;
  font-size: 44px;
  text-align: center;
  line-height: 44px;
  color:  orange;
}
.box .xushipocontent {
  background: rgb(247, 244, 244);
}
.box .icon-chuizi {
  margin: 0 auto;
  font-size: 24px;
  height: 30px;
  line-height: 30px;
  padding-top: 6px;
}
.list1 + .list1 {
    margin-top: 0.6rem;
}
.homebanner1 {
    @include rect(94% ,2.18rem);
    @include flexbox();
    @include overflow();
    margin-left: 3%;
    margin-top: -0.21rem;
    li + li {
        margin-left: 0.06rem;
    }
    li {
    @include rect(1.5rem ,2.18rem);
    @include flexbox();
    @include flex-direction(column);
    .img {
        @include rect(1.5rem, 1.5rem);
        img {
        @include rect(1.5rem, 1.5rem);
        }
    }
    .proname {
        margin-top: 0.03rem;
        font-size: 14px;
        width: 90%;
        height: 40px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .price {
        @include flexbox();
        justify-content: space-between;
        align-items: center;
        margin-top: 0.05rem;
        .left {
            color: #f66;
            display: inline-block;
        }
        .right {
            display: inline-block;
            margin-left: 10px;
            color: orangered;
            font-weight: bold;
            width: 0.5rem;
            height: 0.2rem;
            background-color: rgb(218, 213, 213);
            border-radius: 20px;
            text-align: center;
            font-size: 12px;
        }
        .left {
            font-weight: bold;
        }
    }
    }
}
.box {
  .content {
    @include rect(100%, 100%);
    .van-swipe {
      @include rect(94%, 1.75rem);
      @include overflow();
      @include margin(0 3%);
      .van-swipe__track {
        height: 1.75rem;
        display: flex;
         .van-swipe-item {
          @include rect(100%, 100%);
          img {
            @include rect(100%, 1.75rem);
            border-radius: 10px;
          }
        }
      }
    }
    .homePage1 {
      @include rect(94%, 0.83rem);
      @include margin(0 auto);
      margin-top: 34px;
      display: block;
    }
    .homePage2 {
      @include rect(94%, 1.04rem);
      @include margin(0 auto);
      margin-top: 17px;
      display: block;
    }
  }
}
.underList {
  @include rect(100%, auto);
  .underSpan {
    font-weight: bold;
    @include rect(94%, auto);
    border-top: 1px solid black;
    display: block;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
  }
  .list {
    @include rect(94% ,auto);
    @include flexbox();
    @include justify-content(space-around);
    flex-wrap: wrap;
    @include flex-wrap(wrap);
    margin-left: 3%;
    li {
    @include rect(1.72rem ,2.18rem);
    @include flexbox();
    @include flex-direction(column);
    .img {
      @include rect(1.72rem, 1.72rem);
      img {
      @include rect(1.72rem, 1.72rem);
      }
    }
    .proname {
      margin-top: 0.03rem;
      font-size: 14px;
      width: 90%;
      height: 20px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .price {
      @include flexbox();
      justify-content: space-between;
      align-items: center;
      .left {
        color: #f66;
        display: inline-block;
      }
      .right {
        color: orangered;
        font-weight: bold;
        margin-left:10px;
        width: 0.5rem;
        height: 0.2rem;
        background-color: rgb(218, 213, 213);
        border-radius: 20px;
        text-align: center;
        font-size: 12px;
        display: inline-block;
      }
      .left {
        font-weight: bold;
      }
    }
    }
}
}
li .img img {
  background-color: white;
}
</style>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Swipe, SwipeItem, List, PullRefresh, Toast } from 'vant'
import homebannerlist1 from '@/components/Homebannerlist1'
import homebannerlist2 from '@/components/Homebannerlist2'
import homebannerlist3 from '@/components/Homebannerlist3'
import homebannerlist4 from '@/components/Homebannerlist4'
import homebannerlist5 from '@/components/Homebannerlist5'
import homebannerlist6 from '@/components/Homebannerlist6'
import homebannerlist7 from '@/components/Homebannerlist7'
import homebannerlist8 from '@/components/Homebannerlist8'
import underList from '@/components/Underlist'

Vue.use(Swipe).use(SwipeItem)
Vue.use(List)
Vue.use(Toast)
Vue.use(PullRefresh)
export default {
  data () {
    return {
      bannerlist: [],
      loading: false,
      finished: false,
      pageCode: 1,
      underList: [],
      flag: false,
      top: 0,
      isLoading: false
    }
  },
  components: {
    homebannerlist1,
    homebannerlist2,
    homebannerlist3,
    homebannerlist4,
    homebannerlist5,
    homebannerlist6,
    homebannerlist7,
    homebannerlist8,
    underList
  },
  created () {
    axios.get('/banner').then(res => {
      this.bannerlist = res.data.data
    })
    axios.get('/pro?pageCode=0').then(res => {
      this.underList = res.data.data
    })
  },
  mounted () {
    document.getElementById('xushipocontent').addEventListener('scroll', () => {
      let top = document.getElementById('xushipocontent').scrollTop
      if (top > 400) {
        this.flag = true
      } else {
        this.flag = false
      }
    })
  },
  methods: {
    onRefresh () {
      this.isLoading = true
      axios.get('/banner').then(res => {
        this.bannerlist = res.data.data
        this.$toast('刷新成功')
        this.isLoading = false
      })
    },
    backTop () {
      document.getElementById('xushipocontent').scrollTop = 0
      this.flag = true
    },
    onLoad () {
      this.loading = true
      axios.get('/pro?pageCode=' + this.pageCode).then(res => {
        this.loading = false
        this.pageCode++
        if (res.data.data.length === 0) {
          this.finished = true
        } else {
          this.underList = [...this.underList, ...res.data.data]
        }
      })
    }
  }
}
</script>
